<template>
  <div align="center">
    <div>
      <h1>添加图片</h1>
      <p>图片：<input type="file" id="pic"></p>
      <p>网址：<input type="url" v-model="form.url"></p>
      <p>类型：<input type="text" v-model="form.types"></p>
      <button @click="add_xinwen">添加</button>
    </div>
    <div>
      <table border="1" cellspacing="0">
        <tr>
          <td>图片</td>
          <td>网址</td>
          <td>类型</td>
        </tr>
        <tr v-for="i in xinwen">
          <td><img :src="'http://127.0.0.1:8000'+i.pic" alt="" width="100px" :title=i.types></td>
          <td><a :href=i.url>点击查看</a></td>
          <td>{{ i.types }}</td>
        </tr>

      </table>
      <button v-for="i in tpage" @click="get_xinwen(i)">{{ i }}</button>

    </div>

  </div>
</template>

<script>
export default {
  name: "add_xinwen",
  data() {
    return {
      form: {},
      xinwen: [],
      tpage: 0
    }
  },
  methods: {
    add_xinwen() {
      let formdata = new FormData()
      let pic = document.getElementById('pic').files[0]
      formdata.append('pic', pic)
      formdata.append('url', this.form.url)
      formdata.append('types', this.form.types)
      this.$axios.post('xinw/', formdata)
        .then(res => {
          if (res.data.code == 200) {
            alert('添加成功')
            this.form = {}
          }
        })
    },
    get_xinwen(i) {
      this.$axios.get('xinw/?cpage=' + i)
        .then(res => {
          if (res.data.code == 200) {
            this.xinwen = res.data.list
            this.tpage = res.data.tpage
          }
        })
    }
  },
  mounted() {
    this.get_xinwen(1)
  }

}
</script>

<style scoped>

</style>
